<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>模拟一个数据监测</title>
</head>

<body>
	<script type="text/javascript">

		//定义一个对象
		let data = {
			name: '开放Vue',
			address: '北京',
		}

		//创建一个监视的实例对象，用于监视data中属性的变化
		const obs = new Observer(data)
		//输出加工后的data_		
		console.log(obs)

		//准备一个vm实例对象
		let vm = {}
		// data是最开始的，obs是加工后的_data
		vm._data = data = obs

		// Observer创建一个监视的实例对象构造函数
		function Observer(obj) {
			//汇总对象中所有的属性形成一个数组
			const keys = Object.keys(obj)
			//遍历
			keys.forEach((k) => {
				// this是Observer的实例对象
				Object.defineProperty(this, k, {
					get() {
						return obj[k]
					},
					set(val) {
						// vue就是在这一步，没有输出，而是去解析模板，生成虚拟DOM，进行DOM比较
						console.log(`${k}被改了，我要去解析模板，生成虚拟DOM，进行DOM比较`)
						obj[k] = val
					}
				})
			})
		}
	</script>
</body>

</html>